<div *ngIf="runtimeApp$ | async as runtimeApp; else loading" id="page">
  <div class="modal-header">
    <h4 class="modal-title pull-left">Instances for app <strong>{{ runtimeApp.deploymentId }}</strong></h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="cancel()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ng-template ngFor let-item [ngForOf]="runtimeApp.appInstances">
      <div class="panel">
        <div class="panel-heading">
          Instance
          <strong>{{ item.instanceId }}</strong>
          <app-runtime-state [runtimeApp]="item"></app-runtime-state>
        </div>
        <div class="panel-content">
          <ng-template ngFor let-item [ngForOf]="item.attributes | keyvalues">
            <div class="row row-key-value">
              <div class="col-md-8">
                <strong><dataflow-truncator [input]="item.key" trailPosition="start" trail="…"></dataflow-truncator></strong>
              </div>
              <div class="col-md-16">
                <input type="text" readonly [value]="item.value" class="form-control input-sm">
              </div>
            </div>
          </ng-template>
        </div>
      </div>
    </ng-template>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
  </div>
</div>

<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
